<template>
  <div class="Discover">
    <div class="title">
      <h3>发现</h3>
    </div>
    <div>
      <van-cell to="/technicList" value="查看更多" is-link center>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">面试技巧</span>
        </template>
      </van-cell>
      <article-item
        @click.native="$router.push('/technicDetail/' + item.id)"
        v-for="item in skillsList"
        :key="item.id"
        :item="item"
      />
    </div>
    <div class="market">
      <van-cell to="/chart" value="查看更多" is-link center>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">市场数据</span>
        </template>
      </van-cell>
      <div class="Post">
        <span>{{ hot.city }}</span>
        <span style="margin-left: 0.625rem">{{ hot.position }}</span>
      </div>
      <div v-for="(item, index) in yearSalary" :key="item.id">
        <div v-if="index < 4" class="data">
          <span>{{ item.year }}</span>
          <div class="bg">
            <div
              :style="`width: ${(item.salary / topSalary) * 100}%`"
              class="choose"
            >
              ¥{{ item.salary }}
            </div>
          </div>
          <span v-if="item.percent" class="percent">
            <i
              v-if="item.percent < 0"
              class="iconfont icon-xiangxiajiantoucuxiao"
            ></i>
            <i v-else class="iconfont icon-xiangshangjiantoucuxiao"></i>
            {{ item.percent }}%
          </span>
          <div v-else class="percent"></div>
        </div>
        <div v-if="index > 3 && isShow" class="data">
          <span>{{ item.year }}</span>
          <div class="bg">
            <div
              :style="`width: ${(item.salary / topSalary) * 100}%`"
              class="choose"
            >
              ¥{{ item.salary }}
            </div>
          </div>
          <span v-if="item.percent" class="percent">
            <i
              v-if="item.percent < 0"
              class="iconfont icon-xiangxiajiantoucuxiao"
            ></i>
            <i v-else class="iconfont icon-xiangshangjiantoucuxiao"></i>
            {{ item.percent }}%
          </span>
          <div v-else class="percent"></div>
        </div>
      </div>
      <div @click="isShow = !isShow" class="more">
        <i v-if="!isShow" class="iconfont icon-arrow-down"></i>
        <i v-else class="iconfont icon-arrow-top"></i>
        {{ isShow ? '收起显示' : '展开更多' }}
      </div>
    </div>

    <div class="share">
      <van-cell to="/shareList" :border="false" value="查看更多" is-link center>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">面试分享</span>
        </template>
      </van-cell>
      <share-list
        @click.native="$router.push('/shareDetail/' + i.id)"
        v-for="i in shareList"
        :key="i.id"
        :obj="i"
      />
    </div>
  </div>
</template>

<script>
import { hotData } from '@/api/market'
import { skiisList, shareList, goodArticle } from '@/api/InterviewSkills'
import ArticleItem from '@/components/Find/ArticleItem.vue'
import ShareList from '@/components/Find/ShareList.vue'
export default {
  components: {
    ArticleItem,
    ShareList
  },
  data () {
    return {
      isShow: false,
      skillsList: [],
      hot: {},
      yearSalary: [],
      topSalary: '',
      shareList: []
    }
  },
  methods: {
  },
  async created () {
    const res = await skiisList({
      start: 0,
      limit: 3
    })
    this.skillsList = res.data.list
    // console.log(res);
    const res2 = await hotData()
    this.hot = res2.data
    const arr = res2.data?.yearSalary.reverse()
    this.yearSalary = arr
    this.topSalary = res2.data.topSalary
    const res3 = await shareList({
      start: 0,
      limit: 3
    })
    this.shareList = res3.data.list
    const res4 = await goodArticle({
      article: 1,
      needToken: true
    })
    localStorage.setItem('goodList', JSON.stringify(res4.data.list))
  },
}
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  .Discover {
    margin: 0.625rem;
    background-color: #f9f9f9;
    .custom-title {
      font-size: 1.125rem;
      font-weight: 500;
    }
    ::v-deep .van-cell--clickable {
      height: 7vh !important;
      line-height: 7vh;
    }
    .title {
      background-color: #fff;
      h3 {
        height: 7vh;
        line-height: 7vh;
        text-align: center;
        border-bottom: 0.0625rem solid #eef0f2;
      }
    }
    .market {
      overflow: hidden;
      margin-top: 0.625rem;
      background-color: #fff;
      margin-bottom: 1.25rem;
      .Post {
        padding: 0.625rem;
        height: 10vh;
        display: flex;
        align-items: center;
        span {
          font-size: 0.875rem;
          padding: 0.3125rem;
          background-color: #ebeaea;
          border-radius: 0.3125rem;
        }
      }
      .data {
        padding: 0.625rem 0;
        display: flex;
        justify-content: space-between;
        .bg {
          flex: 1;
          background-color: #e9dfdf;
          height: 13px;
          border-radius: 1.25rem;
          margin: 0px 0.3125rem;
          .choose {
            color: #fff;
            font-size: 0.75rem;
            height: 0.8125rem;
            text-align: right;
            border-radius: 1.25rem;
            background-color: #ec766d;
            .show {
              visibility: hidden;
            }
          }
        }
        .percent {
          width: 4.0625rem;
          .icon-xiangxiajiantoucuxiao {
            color: #ec766d;
          }
          .icon-xiangshangjiantoucuxiao {
            color: #7ece8a;
          }
        }
      }
      .more {
        font-size: 0.875rem;
        text-align: center;
      }
    }
    .share {
      margin-bottom: 40px;
    }
  }
}
</style>
